import React, { useEffect, useState } from "react";
import Header from "../../components/Header";
import Cal from "../../components/Cal";
import { LeftOutline } from "antd-mobile-icons";
import request from "../../utils/request";
import { InfiniteScroll } from "antd-mobile";
import { useNavigate } from "react-router-dom";
function Home() {
  //存储列表数据
  const [list, setList] = useState([]);
  const [page,setPage]=useState(1)
  const navigate=useNavigate()
  const city = "";
  const startTime = "";
  const endTime = "";
  const keywords = "";
  const getList = async () => {
    const resp = await request.post("/actor/list/?"+page, {
      city,
      startTime,
      endTime,
      keywords,
    });
    console.log(resp.data);
    setList(resp.data.data);
    setPage(page+1)
  };
  useEffect(() => {
    getList();
  }, []);
  //去往详情页 并携带id
  const goDetail=(v)=>{
   navigate(`/detail/${v.id}`,{state:v})
  }
  return (
    <div>
      {/* 头部组件 */}
      <Header left={<LeftOutline />} title="北京演出日历"></Header>
      {/* 日历组件 */}
      <Cal></Cal>

      {/* 列表 */}

      <div className="list">
        {list.map((v) => {
          return (
            <dl key={v.id} style={{display:'flex'}} onClick={()=>goDetail(v)}>
              <dt>
                <img src={v.coverImageUrl} alt="" />
              </dt>
              <dd style={{marginLeft:'20px'}}>
                 <h3>{v.name}</h3>
                 <p style={{marginTop:'20px'}}>{v.startTime}-{v.endTime}</p>
                  <p>{v.location}</p>
                  <p style={{marginTop:'20px'}}>￥{v.price}</p>
              </dd>
            </dl>
          );
        })}
        {/* 底部的列表实现触底加载更多的懒加载效果 */}
         <InfiniteScroll loadMore={getList} hasMore={true} />
      </div>
    </div>
  );
}

export default Home;
